<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-dialog class="dia-style" :title="title" :visible.sync="isOpen" width="60%" :close-on-click-modal="false">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" @submit.native.prevent>
      <el-form-item label="标准名称" prop="mdName">
        <el-input
          v-model="formData.mdName"
          placeholder="请输入标准名称"
          maxlength="50"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="标准类型" prop="type">
        <el-select v-model="formData.type" filterable placeholder="请输入标准类型" clearable :style="{ width: '100%' }">
          <el-option
            v-for="(item, index) in typeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="描述信息" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          placeholder="请输入描述信息"
          :maxlength="100"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addtMeta, updateMeta } from '@/api/milkyway/metaDataManagement'
export default {
  components: {},
  props: {
    title: {
      type: String,
      default() {
        return '编辑'
      }
    },
    formData: {
      type: Object,
      default() {
        return {
          mdName: undefined,
          type: undefined,
          description: undefined
        }
      }
    }
  },
  data() {
    return {
      isOpen: false,
      rules: {
        mdName: [
          {
            required: true,
            message: '请输入标准名称',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请输入标准类型',
            trigger: 'change'
          }
        ],
        description: []
      },
      typeOptions: [
        {
          label: 'JSON',
          value: 0
        },
        {
          label: '二维表',
          value: 1
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          if (this.title === '编辑') {
            updateMeta(this.formData).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.isOpen = false
              this.resetForm()
              this.$emit('submitForm')
            })
          } else {
            addtMeta(this.formData).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.isOpen = false
              this.resetForm()
              this.$emit('submitForm')
            })
          }
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    cancel() {
      this.$refs['elForm'].resetFields()
      this.isOpen = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-dialog:not(.is-fullscreen) {
    height: 400px !important;
  }
  .el-dialog__body {
    height: auto !important;
  }
}
</style>
